<template>
  <div class="item" @click="goInformation(item.tmdbId)">
    <div class="image-container">
      <el-image
        :src="getPicByMovieId(item.movieId)"
        fit="cover"
        @error="handleImageError"
        class="movie-image"
      ></el-image>

      <!-- 显示少量信息的容器 -->
      <div class="info-small">
        <p class="movie-title">{{ item.title }}</p>
        <div class="rating">
          <span class="el-icon-star-off"></span>
          <span> {{ item.avgRating.toFixed(1) }}</span>
        </div>
      </div>
      <!-- 显示全部信息的容器 -->
      <div class="info-large">
        <p class="movie-title">{{ item.title }}</p>
        <div class="rating">
          <span class="el-icon-star-off"></span>
          <span>{{ item.avgRating.toFixed(1) }}</span>
        </div>
        <div class="genres">
          <p
            v-for="(gen, index) in genres"
            :key="index"
            @click="clickGenres(gen, $event)"
          >
            {{ gen }}
          </p>
        </div>
        <div class="setRating" @click="clickRate($event)">
          <el-rate
            v-model="myRating"
            :colors="colors"
            @change="ratingChange"
            allow-half
          >
          </el-rate>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getPicByMovieId, getOnePic } from "@/utils/tools";
import service from "@/utils/request";

export default {
  name: "movieItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      userInfo: {},
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 评分颜色
      myRating: 1, // 当前评分
      defaultImage: "http://localhost:8081/pic/no-image-available.jpg", // 默认图片
    };
  },

  computed: {
    genres() {
      return this.item.genres.split("|").sort((a, b) => a.length - b.length);
    },

    allRatings() {
      return this.$store.getters.getAllRatings; // 从 Vuex 获取所有评分
    },
  },
  mounted() {
    this.userInfo = this.$store.getters.getUser; // 从 Vuex 获取用户信息
    if (this.userInfo) {
      this.userInfo = this.userInfo;
    } else {
      this.userInfo = JSON.parse(localStorage.getItem("user"));
    }
    let allRatings = JSON.parse(localStorage.getItem("allRatings"));
    if (allRatings) {
      let index = allRatings.findIndex((item) => {
        return item.movieId == this.item.movieId;
      });
      if (index >= 0) {
        this.myRating = allRatings[index].rating;
      }
    }
  },
  methods: {
    ...mapActions(["getRating", "updateOrAddRating"]), // 映射 Vuex 的 actions
    getPicByMovieId,
    getOnePic,
    //点击电影，去往详情页，发送请求更新矩阵
    goInformation(tmdbId) {
      //用户信息存在
      if (this.userInfo) {
        this.updateUserMertix();
        let url = `https://www.themoviedb.org/movie/${tmdbId}`;
        window.open(url, "_blank");
      } else {
        this.$message.warning("登录后才可查看详情！");
      }
    },
    updateUserMertix() {
      let tmpGenres = this.item.genres.replace("|", ",");
      const params = {
        genres: tmpGenres,
        userId: this.userInfo.userId,
      };
      service.get("/movies/clickMovie", { params }).then((res) => {
        if (res.code == 200) {
          console.log("更新用户矩阵成功");
        } else {
          console.log("更新用户矩阵失败");
        }
      });
    },

    clickGenres(gen, event) {
      console.log("选择了分类：" + gen);
      if (event) {
        event.stopPropagation(); // 阻止冒泡
      }
    },
    getAllRatings() {
      const params = {
        userId: this.userInfo.userId,
      };
      // 发送 GET 请求
      service
        .get("/user/getAllRatings", { params })
        .then((res) => {
          console.log("查询所有评分记录");
          if (res.data) {
            localStorage.setItem("allRatings", JSON.stringify(res.data));
          }
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    //修改评分行为
    async ratingChange(e) {
      const params = {
        newId: this.userInfo.userId,
        movieId: this.item.movieId,
        rating: e,
      };
      // 发送 GET 请求
      try {
        const res = await service.get("/movies/clickRating", { params });
        console.log("点击评分");
        if (res.code == 200) {
          this.$message.success("评分成功！");
          this.myRating = e;

          this.getAllRatings();
        } else {
          this.$message.error("评分失败！");
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    },
    handleImageError(event) {
      // 当图片加载失败时，将图片的 src 替换为默认图片
      let randomInt = this.item.movieId / 289000;
      randomInt = randomInt * 9731;
      randomInt = Math.floor(randomInt);
      event.target.src = this.getOnePic(randomInt);
    },

    clickRate(event) {
      if (event) {
        event.stopPropagation(); // 阻止冒泡
      }
    },
  },
};
</script>

<style lang="less" scoped>
@item-height: 13rem;
@item-width: 9.36rem;
@num-10: 0.6rem;
@transition-duration: 0.5s; // 动画过渡时长

.item {
  width: @item-width;
  height: @item-height;
  border-radius: @num-10;
  cursor: pointer;
  background: #f5f2f2;
  position: relative; // 使悬浮内容显示在图片上层

  .image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; // 防止内容超出容器
    border-radius: @num-10;
  }

  .movie-image {
    width: 100%;
    height: 100%;
    border-radius: @num-10 @num-10 0 0;
  }

  /* 少量信息容器 */
  .info-small {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.2rem 0.5rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7); // 背景色
    color: white;
    transition: opacity @transition-duration ease;
    height: auto;
    .movie-title {
      font-size: 1.1rem; /* 设置字体大小 */
      overflow: hidden; /* 隐藏超出的部分 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      display: -webkit-box; /* 使用 WebKit 弹性盒模型 */
      -webkit-line-clamp: 2; /* 限制显示行数为2行 */
      -webkit-box-orient: vertical; /* 设置为垂直排列 */
      white-space: wrap; /* 确保每一行的文本不会提前换行 */
      word-wrap: break-word; /* 允许长单词折行但不会拆分 */
    }
    .rating {
      display: flex;
      margin-top: 0.2rem;
      span {
        color: #ffea00;
        margin-right: 0.5rem;
        display: inline-flex; /* 使用 inline-flex 使 span 在一行内显示，并应用 flexbox 布局 */
        justify-content: center; /* 水平居中文本 */
        align-items: center; /* 垂直居中文本 */
        height: 1.1rem; /* 设置高度 */
        font-size: 1.1rem; /* 设置字体大小 */
        text-align: center; /* 确保文本在水平方向居中 */
      }
    }
  }

  /* 显示全部信息的容器 */
  .info-large {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7); // 背景色
    color: white;
    transition: opacity @transition-duration ease;
    height: auto;
    opacity: 0; // 初始时隐藏
    visibility: hidden; // 初始时不显示
    .movie-title {
      font-size: 1.1rem; /* 设置字体大小 */
      overflow: hidden; /* 隐藏超出的部分 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      display: -webkit-box; /* 使用 WebKit 弹性盒模型 */
      -webkit-line-clamp: 2; /* 限制显示行数为2行 */
      -webkit-box-orient: vertical; /* 设置为垂直排列 */
      white-space: wrap;
      word-wrap: break-word; /* 允许长单词折行但不会拆分 */
    }
    .rating {
      display: flex;
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;
      span {
        color: #ffea00;
        margin-right: 0.5rem;
        display: inline-flex; /* 使用 inline-flex 使 span 在一行内显示，并应用 flexbox 布局 */
        justify-content: center; /* 水平居中文本 */
        align-items: center; /* 垂直居中文本 */
        height: 1.1rem; /* 设置高度 */
        font-size: 1.1rem; /* 设置字体大小 */
        text-align: center; /* 确保文本在水平方向居中 */
      }
    }
    .genres {
      display: flex; /* 使用 flex 布局来使子项换行 */
      flex-wrap: wrap; /* 当内容超出时自动换行 */
      gap: 4px; /* 子项之间的间距，可根据需要调整 */
      width: 100%; /* 确保 genres 容器宽度为父容器的100% */
      p {
        background-color: #3c6693;
        font-size: 0.8rem;
        border-radius: 5px;
        padding: 2px;
        margin: 0; /* 清除 p 标签默认的外边距 */
        white-space: nowrap; /* 确保单个标签内容不会换行 */
        transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
      }
    }
    .setRating {
      margin-bottom: 0.4rem;
      margin-top: 0.2rem;
      /deep/ .el-rate__icon {
        font-size: 1.2rem;
      }
    }
  }

  .movie-description {
    margin: 0;
    padding: 0.5rem 0;
  }

  &:hover {
    .info-small {
      opacity: 0; // 悬停时隐藏少量信息
    }
    .info-large {
      opacity: 1; // 悬停时显示完整信息
      visibility: visible; // 显示
    }
  }
}
</style>
